<template>
  <div>
    <div class="commodity">
          <div class="leftBox">
            <input type="checkbox" @click="zhuangt([item.id,item.stockout_reserved])" :checked="item.stockout_reserved">
            <img v-lazy="item.small_image" alt="">
          </div>
          <div class="rightBox">
            <p>{{item.name}}</p>
            <div class="flooter">
                <span class="money">{{item.price}}</span>
                <div class="jisuan">
                    <div class="jian"  @click="jianClick([item.id,item.num])">-</div>
                    <div class="zongs">{{item.num}}</div>
                    <div class="jia" @click="jiaClick([item.id,item.num])">+</div>
                </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:"ShangPin",
    props:["item"],
    check:false,
    methods:{
        jiaClick(a){
            a[1]++;
            this.$store.dispatch("chang",a)
        },
        jianClick(a){
            a[1]--;
            if(a[1] < 0){
                a[1] = 0
            }
            this.$store.dispatch("chang",a)
        },
        zhuangt(aa){
            this.$store.dispatch("zhuangt",aa)
        }
    }
}
</script>

<style lang="scss" scss>
.commodity{
  width: 100%;
  height: 2rem;
  background: white;
  margin-top: .2rem;
  display: flex;
  align-items: center;
  .leftBox{
    width: 40%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img{
      width: 2rem;
      height: 2rem;
    }
  }
  .rightBox{
    width: 60%;
    height: 100%;
    p{
      margin-top: .4rem;
      font-size: .34rem;
    }
    .flooter{
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: .3rem;
      margin-top: .4rem;
      .jisuan{
        display: flex;
        .jian,.jia{
          width: .6rem;
          height: .4rem;
          line-height: .4rem;
          text-align: center;
        }
        .zongs{
          width: 0.7rem;
          height: .4rem;
          text-align: center;
          line-height: .4rem;
          background: #F4F4F4;
        }
      }
    }
  }
}
</style>